<template>
	<div class="search-page">
		<div class="search-cont page-cont-box">
			<BreadCrumb :data="dataObj.crumbList" />
			<div class="total-box">
				<div class="total-wrap">
					<div class="tatal-cont">
						<div class="locate-box">
							<el-image class="search-img" :src="searchImg" fit="contain" />
						</div>
						<div class="tatal-txt"  v-lang="{lang: controlSto.language, lgid: searchType}">Prescription{{searchType}}</div>
						<div class="tatal-txt" v-lang="{lang: controlSto.language, lgid: -42}">Total</div>
						<div class="tatal-txt">:</div>
						<div class="tatal-txt">58</div>
					</div>

					<div class="more-box">
						<div class="more-wrap">
							<div class="more-txt" v-lang="{lang: controlSto.language, lgid: -43}">More</div>
							<div class="more-img-box">
								<el-image class="more-img" :src="moreImg" fit="contain" />
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="condition-box">
				<div class="condition-left">
					<SearchDrop class="cond-item">
						<template #title>
							<span v-lang="{lang: controlSto.language, lgid: 7, list: controlSto.langList}"></span>
						</template>
						<template #dropcont>
							<div class="cond-drop-cont-wrap">
								<el-radio-group v-model="condObj.radio">
									<div class="cond-radio-wrap">
										<el-radio class="cond-radio-item" :label="3">Option A</el-radio>
										<el-radio class="cond-radio-item" :label="6">Option B</el-radio>
										<el-radio class="cond-radio-item" :label="9">Option C</el-radio>
									</div>
								</el-radio-group>
						</div>
						</template>
					</SearchDrop>

					<SearchDrop class="cond-item">
						<template #title>
							<span v-lang="{lang: controlSto.language, lgid: 8, list: controlSto.langList}"></span>
						</template>
						<template #dropcont>
							<div class="cond-drop-cont-wrap">
								<el-checkbox-group v-model="condObj.checkList">
									<div class="cond-chbox-wrap">
										<el-checkbox class="cond-chbox-item" label="Option A" />
										<el-checkbox class="cond-chbox-item" label="Option B" />
										<el-checkbox class="cond-chbox-item" label="Option C" />
									</div>
								</el-checkbox-group>
							</div>
						</template>
					</SearchDrop>
				</div>
				<div class="condition-right">
					<div class="ipt-cont">
						 <el-input class="ipt-search" v-model="condObj.searchword" autofocus :placeholder="searchPlace" />
					</div>
					<SearchBtn class="search-item" />
					<TableFilter class="search-item" />
					<SearchLoad  />
				</div>
			</div>
			<div class="cont-box">
				<uiTable
                    :config="dataObj.tableConfig"
                    :columnConfig="dataObj.columnConfig" 
                    :data="dataObj.dataList">
                        <template #xxxx2="{ row }">
							<div class="status-box1" v-if="row.status == 0"><span>禁用</span></div>
							<div class="status-box2" v-else-if="row.status == 1"><span>有效</span></div>
							<div class="status-box3" v-else-if="row.status == 2"><span>被删除</span></div>
							<div class="status-box4" v-else><span>未知</span></div>
						</template>
                </uiTable>
			</div>

		</div>
    </div>
</template>



<script setup>
    import { ref, reactive, computed, onBeforeMount } from 'vue'
	import { useRouter } from 'vue-router'
    import BreadCrumb from '@/components/BreadCrumb.vue'
    import SearchBtn from '@/components/SearchBtn.vue'
    import TableFilter from '@/components/TableFilter.vue'
    import SearchLoad from '@/components/SearchLoad.vue'
    import SearchDrop from '@/components/SearchDrop.vue'
    import uitable from '@/components/ui-table.vue'

    import { controlStore } from '@/stores/control'

    // import { langTxt, preventPeep } from '@/utils/util'
    import { langTxt } from '@/utils/util'

	const controlSto = controlStore();
	const router = useRouter();


    import searchImg from '@/assets/img/searchgrey.png'
    import moreImg from '@/assets/img/more-arrow.png'

	const condObj = reactive({
		searchword: '',
		checkList: [],
		radio: ''
	});
	const dataObj = reactive({
		queryTy: '',
		crumbList: [
            {
                lable: 'Home',
                name: 'home'
            }, {
                lable: 'Search',
                name: 'search'
            }
        ],
		tableConfig: {
			// size: 'small',
			'tooltip-effect': 'dark',
			'highlight-current-row': true,
			stripe: true,
			'header-cell-style': { background: '#BC9F77', color: '#FFF' },
		},
		columnConfig: [
			// { label: '序号', dataCode: 'index', align: 'center', width: 60, fixed: 'left' },
			{ label: 'Perscription ID', langkey: 3, dataCode: 'xxxx1', 'min-width': 110 },
			{ label: 'Name', langkey: '-10', dataCode: 'xxxx2', 'min-width': 120, 'show-overflow-tooltip': true },
			{ label: 'Dosage form', dataCode: 'xxxx3', 'min-width': 120,  },
			{ label: 'The main functions', dataCode: 'xxxx4', 'min-width': 500 }
		],
		dataList: [
			{
				xxxx1: 12345,
				xxxx2: '',
				xxxx3: 'yyiuiyiuyiuyiuyiuyiuyiuyiujhkjghgjjjhjkgjgjhgjhjhghhkjhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh',
				xxxx4: '',

			}, {
				xxxx1: '12345d',
				xxxx2: '',
				xxxx3: 0,
				xxxx4: '',
			}
		]
	});

	const searchType = computed(() => {
		let res = 0;
		if(dataObj.queryTy > 0) {
			res =  -(Number(dataObj.queryTy) + 19);
		}
		return res;
	})

	const searchPlace = computed(() => {
		return langTxt(controlSto.language, '-15');
	})


    onBeforeMount(()=> {
		// preventPeep();
		initQuery();
    });

	const initQuery = () => {
		if(router.currentRoute.value.query) {
			dataObj.queryTy = router.currentRoute.value.query.ty || 0;
		}
    };

	const toClk = () => {
        // console.log('searchPlacesearchPlacesearchPlace---');
    };
   
</script>

<style lang="scss" scoped>
	.search-page {
		height: 100%;
		min-height: calc(100vh - 250px);
		text-align: center;
		background-size: 100% 100%;
		.search-cont {
			display: inline-block;
			// width: 1400px;
    		text-align: left;
			.total-box {
				padding: 8px 0 32px;
				.total-wrap {
					display: flex;
					height: 50px;
					padding: 0 24px;
					justify-content: space-between;
					line-height: 50px;
					background-color: #F5F7FA;
					.tatal-cont {
						font-size: 16px;
						.locate-box {
							position: relative;
							display: inline-block;
							top: 2px;
							padding-right: 10px;
							.search-img {
								height: 16px;
							}
						}
						.tatal-txt {
							display: inline-block;
							padding-right: 4px;
						}
					}
					.more-box {
						.more-wrap {
							.more-txt {
								display: inline-block;
								font-size: 16px;
								font-weight: 600;
								color: #967846;
							}
							.more-img-box {
								position: relative;
								display: inline-block;
								top: 3px;
								.more-img {
									height: 16px;
								}
							}
						}
					}
				}
			}

			.condition-box {
				display: flex;
				padding-bottom: 32px;
				justify-content: space-between;
				// border: 1px solid red;
				.condition-left {
					.cond-item {
						margin-right: 16px;
					}
				}
				.condition-right {
					.ipt-cont {
						display: inline-block;
						padding-right: 16px;
						.ipt-search {
							// width: 300px;
						}
					}
					.search-item {
						margin-right: 16px;
					}
				}
			}



		}
	}
	
</style>


<style lang="scss">
    .cond-item-drop-box {
        .cond-drop-cont-wrap {
			max-height: 260px;
			overflow-y: auto;
			.cond-chbox-wrap {
				width: 200px;
				padding: 0;
				.cond-chbox-item {
					width: 188px;
					padding-left: 12px;
					margin-right: 0;
				}
				// :deep() {
				// 	.el-checkbox__input.is-checked .el-checkbox__inner {
				// 		background-color: #BC9F77;
				// 		border-color: #BC9F77;
				// 	}
				// }

				.el-checkbox__inner:hover {
					border-color: #BC9F77;
				}
				.el-checkbox__input.is-checked .el-checkbox__inner {
					background-color: #BC9F77;
					border-color: #BC9F77;
				}
				.el-checkbox__input.is-checked + .el-checkbox__label {
					color: #BC9F77;
				}
			}

			.cond-radio-wrap {
				width: 200px;
				padding: 0;
				.cond-radio-item {
					width: 188px;
					padding-left: 12px;
					margin-right: 0;
				}
				.el-radio__inner:hover {
					border-color: #BC9F77;
				}
				.el-radio__input.is-checked .el-radio__inner {
					background-color: #BC9F77;
					border-color: #BC9F77;
				}
				.el-radio__input.is-checked + .el-radio__label {
					color: #BC9F77;
				}
			}
			// <div class="cond-radio-wrap">
			// 	<el-radio class="cond-radio-item" :label="3">Option A</el-radio>
			// 	<el-radio class="cond-radio-item" :label="6">Option B</el-radio>
			// 	<el-radio class="cond-radio-item" :label="9">Option C</el-radio>
			// </div>
			
        }
    }
</style>